<!--  -->
<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <div class="doumee-table-buttons">
      <el-button v-if="meta.indexOf('IntegralAdd') > -1" v-preventReClick type="primary" @click="$router.push({name: 'IntegralAdd'})">{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="goodsList"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb margin-t-20"
    >
      <el-table-column
        align="center"
        :label="$t('message.splx2')"
        prop="classifyName"
        min-width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.type == "1" ? $t('message.stsp') : $t('message.xlsp') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.spmc')"
        min-width="200"
        prop="name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.sptp')"
        min-width="200"
        prop="img_url"
      >
        <template v-if="scope.row.img_url" slot-scope="scope">
          <el-image
            fit="contain"
            :src="scope.row.img_url"
            :preview-src-list="[scope.row.img_url]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.spkc')"
        prop="stock"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="$t('message.spjgjf')"
        prop="price"
        min-width="140"
      />
      <el-table-column
        align="center"
        :label="$t('message.sort')"
        prop="sort"
        min-width="100"
      />
      <el-table-column align="center" :label="$t('message.status')" min-width="80" fixed="right">
        <template slot-scope="scope">
          {{ scope.row.status == "1" ? $t('message.shanjia') : $t('message.xiajia') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" min-width="250" align="center" fixed="right">
        <template slot-scope="scope">
          <div v-if="scope.row.status == '0'" class="flex-cc">
            <el-button v-if="meta.indexOf('GoodsEditSave') > -1" v-preventReClick type="text" @click="toEdit(scope.row.id)">{{ $t('message.edit') }}</el-button>
            <el-button
              v-if="meta.indexOf('GoodsStatusEdit') > -1"
              v-preventReClick
              type="text"
              @click="editStatus(scope.row.id, 1)"
            >{{ $t('message.shanjia') }}</el-button>
            <el-button
              v-if="meta.indexOf('GoodsStatusEdit') > -1"
              v-preventReClick
              type="text"
              class="secondColor"
              @click="toDelete(scope.row.id)"
            >{{ $t('message.del') }}</el-button>
          </div>
          <div v-if="scope.row.status == '1' && meta.indexOf('GoodsRemove') > -1" class="flex-cc">
            <el-button
              v-preventReClick
              type="text"
              @click="editStatus(scope.row.id, 0)"
            >{{ $t('message.xiajia') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import {
  integralList, integralStatusEdit, integralRemove
} from '@/api'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'IntegralList',
  components: {
    QueryForm
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'name',
          type: 'input',
          label: this.$t('message.spmc'),
          clearable: true
        }, {
          filed: 'type',
          type: 'select',
          label: this.$t('message.splx2'),
          clearable: true,
          options: [
            { value: '1', label: this.$t('message.stsp') },
            { value: '2', label: this.$t('message.xlsp') }
          ]
        }, {
          filed: 'status',
          type: 'select',
          label: this.$t('message.spzt2'),
          clearable: true,
          options: [
            { value: '1', label: this.$t('message.shanjia') },
            { value: '0', label: this.$t('message.xiajia') }
          ]
        }],
        online: true
      },
      totalCount: 0,
      listLoading: true,
      goodsList: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      filters: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {
    if (this.$route.query.renovate) {
      this.getList(1)
    }
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList(page) {
      const { pagination, filters } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      integralList({
        pagination,
        param: filters
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.goodsList = res.recordList
          this.totalCount = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 启用或禁用
    editStatus(id, status) {
      integralStatusEdit({
        param: {
          id,
          status
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            if (status === 1) {
              this.$message.success(this.$t('message.sjcg'))
            } else {
              this.$message.success(this.$t('message.xjcg'))
            }
            this.getList()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 删除
    toDelete(id) {
      const that = this
      this.$confirm(this.$t('message.scsptc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          integralRemove({ param: { id }, userId: sessionStorage.getItem('userId') }).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.delcg'))
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    // 编辑
    toEdit(id) {
      this.$router.push({ name: 'IntegralAdd', query: { id: id }})
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.division-line {
  text-align: center;
  display: inline-block;
  color: #999;
  width: 20px;
  margin-right: 10px;
}
.goosmanager-space-box {
  display: flex;
  position: relative;
  .box-item {
    // position: absolute;
    .goodstype-item {
      background-color: #f7f7f7;
      padding: 20px;
      border-radius: 4px;
      margin-top: 5px;
      margin-right: 10px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      .popItems {
        display: flex;
        flex-direction: column;
        // align-items: flex-start;
        // justify-content: flex-start;
      }
    }
    .goodstype-item.active {
      box-shadow: 0 0 0 1px $menuActive;
      background-color: #f4f7fc;
    }
    .add-goodstype-btn {
      position: absolute;
      bottom: 0;
      left: 55px;
      width: 150px;
    }
  }
  .box-item.goodstype {
    width: 300px;
    padding-right: 30px;
    min-height: 500px;
  }
  .box-item.goodsinfo {
    flex: 1;
    min-width: 0;
  }
}
.pre {
  white-space: pre;
  .discount-title {
    color: #303133;
    font-size: 16px;
    margin-bottom: 12px;
  }
}
</style>
